// 实现这个项目的构建任务
const gulpLoadPlugins = require('gulp-load-plugins');
const plugins = gulpLoadPlugins({
    postRequireTransforms: {
      sass: function(sass){
        return sass(require('sass'))
      }
    }
});
const { src, dest, parallel, series} = require('gulp')
const del = require('del')

const style = () => {
    return src('src/assets/styles/*.scss', { base: 'src' })
        .pipe(plugins.sass({ outputStyle: 'expanded' })) //生成的css样式
        .pipe(dest('dist'))
}

const script = () => {
    return src('src/assets/scripts/*.js', { base: 'src' })
        .pipe(plugins.babel({ presets: ['@babel/preset-env'] })) //es6变成es5
        .pipe(dest('dist'))
}

const page = () => {
    return src('src/*.html', { base: 'src' }) // src/**/*.html 代表src下面任意子目录下面的html文件
        .pipe(dest('dist'))
}

const image = () => {
    return src('src/assets/images/**', { base: 'src' })
      .pipe(plugins.imagemin())
      .pipe(dest('dist'))
} 
  
const font = () => {
    return src('src/assets/fonts/**', { base: 'src' })
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}

const extra = () => {
    return src('public/**', { base: 'public' })
        .pipe(dest('dist'))
}

const clean = () => {
    return del(['dist'])
}

const build = parallel(style, script, page, image, font)
const develop = series(clean, parallel(build, extra))

module.exports = {
    build,
    develop,
    clean
}